<template>
  <BasicModal
    v-bind="$attrs"
    :minHeight="400"
    :width="600"
    @register="registerModal"
    :title="t('routes.table.accountManagement.viewAccountDetail')"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <Tabs v-model:activeKey="activeKey">
      <TabPane key="1" :tab="t('routes.table.accountManagement.role')">
        <BasicTable @register="registerRoleTable" />
      </TabPane>
      <TabPane key="2" :tab="t('routes.table.accountManagement.department')">
        <BasicTable @register="registerDepTable" />
      </TabPane>
    </Tabs>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { Tabs, TabPane } from 'ant-design-vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicTable, useTable } from '/@/components/Table';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { GetRoleColumns, GetDepColumns } from './account.data';

  import { GetUserOrgRoleData } from '/@/api/demo/system';

  const { t } = useI18n();
  const activeKey = ref('1');
  const roleList = ref([]);
  const depList = ref([]);

  async function handleSubmit() {
    try {
      setModalProps({ confirmLoading: true });
      handleCancel();
    } finally {
      setModalProps({ confirmLoading: false });
    }
  }

  const handleCancel = () => {
    activeKey.value = '1';
    closeModal();
  };

  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    setModalProps({ confirmLoading: false });
    GetUserOrgRoleData(data.record.id).then((res) => {
      roleList.value = res.functionList;
      depList.value = res.orgList;
    });
  });

  const [registerRoleTable] = useTable({
    titleHelpMessage: 'AccountRole',
    rowKey: 'id',
    columns: GetRoleColumns,
    useSearchForm: false,
    showTableSetting: false,
    bordered: true,
    canResize: false,
    dataSource: roleList,
  });

  const [registerDepTable] = useTable({
    titleHelpMessage: 'AccountDep',
    rowKey: 'id',
    columns: GetDepColumns,
    useSearchForm: false,
    showTableSetting: false,
    bordered: true,
    canResize: false,
    dataSource: depList,
  });
</script>
